<template>
  <view class="tp-page-map">
    <map :latitude="latitude" :longitude="longitude" scale="10" :markers="markers" @tap="ontab"></map>
    <!-- <view class="full-screen" @click="onFullScreen">
      <ai-icon type="icon-full-screen" :size="24" :bold="true" :shadow="true" color="var(--white)"></ai-icon>
    </view> -->
  </view>
</template>

<script>
  export default {
    name:"tp-page-map",
    props: {
      planId: [Number, String],
      latitude: Number,
      longitude: Number,
      view: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        
      };
    },
    computed: {
      markers() {
        return [{
          id: 0,
          width: 25,
          height: 25,
          zIndex: 2,
          longitude: this.longitude, 
          latitude: this.latitude,
          iconPath: '/static/location.png',
        }]
      }
    },
    methods: {
      onFullScreen() {
        let pid = this.planId
        let view = this.view ? "1" : "0"
        let url = `/pages/plan/plan-map?planId=${pid}&view=${view}`
        uni.navigateTo({ url: url })
      },
      ontab() {
        this.onFullScreen()
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .tp-page-map {
    position: relative;
    
    .full-screen {
      position: absolute;
      right: $gutter;
      top: $gutter * 0.5;
      // background-color: var(--brand-2);
      padding: 0 2px;
      font-weight: 600;
      border-radius: 0 0 2px 2px;
      z-index: 1;
    }
  }

  map {
    width: 100vw;
    height: 660rpx;
    overflow: hidden;
    margin-top: -160rpx;
    z-index: 0;
  }
</style>